<template>
	<view>
		<view class="autoview-clz">
			<text class="autoview-title">{{ storeName }}</text>
			<u-icon name="arrow-down-fill" color="#9E6876" size="26" @click="show = true"></u-icon>
			<u-select v-model="show" :list="storelist" @confirm="confirm"></u-select>
			<view class="autoview_1">
				<scroll-view scroll-y="true" style="height: 100%;padding-bottom: 60px;" @scrolltolower="onReachBottom">
					<view class="autoview_2" v-for="(employee, index) in list" :key="index" >
						<view class="autoview_left">
							<text class="employee-name">{{ employee.staffname }}</text>
							<text class="timestamp">{{ employee.created_at }}</text>  
						</view>	
						<image class="employee-star" src="../../static/image/star.png"></image>
						<text class="employee-score">{{ employee.attitude + employee.quality + employee.environment}}</text>  
						<image class="employee-back" src="../../static/image/back.png" @click="goToDetail(employee.id)"></image>
					</view>
					<view v-if="loading" class="loading">加载中...</view>  
				    <view v-if="noMore" class="no-more">没有更多了</view>  
				</scroll-view>
			</view>	
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId: 0,
				storeName: '',
				show: false,
				storelist:[],
				list: [], // 初始列表数据  
				page: 1, // 分页页码  
				pageSize: 9, // 每页数据量  
				loading: false, // 是否正在加载  
				noMore: false // 是否没有更多数据 
			}
		},
		onLoad() {
			const that = this;
			console.log("当前使用的uView版本号为：", that.$u.config.v);
		},
		onShow() {
			const that = this;
		},
		// // 监听到下拉刷新
		// onPullDownRefresh() {
		// 	console.log("监听到下拉刷新");
		// 	setTimeout(() => {
		// 		// 模拟1秒后停止下拉刷新显示样式
		// 		uni.stopPullDownRefresh();
		// 	}, 1000)
		// },
		onHide() {
			console.log('页面消失了');
		},
		mounted() {  
			this.getStoreList();
			
		},
		methods: {
			confirm(e) {
				this.storeName = e[0].label;
				this.storeId = e[0].value;
				this.noMore = false;
				this.list = [];
				this.page = 1;
				this.fetchData(this.storeId);
			},
			goToDetail(item) {  
			      // 跳转到详情页，并传递item作为参数 
			      uni.navigateTo({
			        url: `/pages/detail/detail?id=${item}`  
			      });   
			},
			getStoreList(){
				this.$api.getStoreList().then(res => {
					this.storelist = res.data.data
					this.storeName = res.data.data[0].label;
					this.storeId = res.data.data[0].value;
					this.fetchData(this.storeId);	
				})
			},
			fetchData(storeId) {  
				console.log(storeId)
			      if (this.noMore) return;  
			      this.loading = true;  
				  let data = {
					storeid:storeId,
				  	page: this.page,
					pageSize: this.pageSize
				  }
			      // 这里应该是向服务器请求数据的代码  
			      this.$api.getEvaluateList(data).then(res => {
			      	const data = res.data.data.list
					if (data.length > 0) {  
						// 如果有数据，则添加到列表  
						this.list = [...this.list, ...data];  
						this.page++; // 页码+1  
					}  
					if (this.list.length >= res.data.data.total) { 
					    this.noMore = true; 
						 // 停止加载
						 this.loading = false; 
					}  
					  
			      }).catch(err => {
			      	console.log("进行网络请求--失败", err);
			      })  
			      
			},
			// 滚动到底部时触发  
			onReachBottom() {  
			  this.fetchData(); 
			   console.log('onReachBottom')
			} 
		}
	}
</script>

<style>
	@font-face {
	    font-family: 'Roboto';  
	    src: url('../../static/fonts/Roboto-Black-1.ttf') format('truetype');  
	} 
	.content{
		background-color: #F0F0F0;
		height:auto;
		z-index: 0;
	}
	.autoview-clz{
		padding-top: 100rpx;  
		background-size: contain;
		background-image: url('../../static/image/backimg.png');
		height: 412rpx;
		font-family: Roboto;
		font-size: 24px;
		color: #333333;
		
	}
	
	.autoview-title{
		padding-left: 48rpx;
		padding-right: 14rpx;
	}
	
	.autoview_1{
		margin-left: 24rpx;
		margin-top: 52rpx;
	}
	.autoview_2{
		margin-top: 20rpx;
		width: 702rpx;
		height: 132rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		display: flex; /* 启用Flexbox */  
		align-items: center; /* 水平居中子元素 */ 
	}
	.autoview_left{
		
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.employee-name{
		font-size: 32rpx;
		margin-left: 24rpx;
		margin-top: 26rpx;
	}
	.timestamp{
		font-size: 28rpx;
		color: #888;
		margin-left: 24rpx;
		margin-top: 12rpx;
	}
	.employee-star{
		width: 60rpx;
		height: 60rpx;
		margin-left: auto;
		margin-right: 16rpx;
	}
	.employee-score{
		color: #F58B00;
		font-size: 32rpx;
		margin-right: 40rpx;
	}
	.employee-back{
		width: 24rpx;
		height: 36rpx;
		margin-right: 24rpx;
	}
	.loading {  
	  text-align: center;  
	  padding: 20px;  
	}  
	.no-more {  
	  text-align: center;  
	  padding: 20px;  
	  color: #ccc;  
	} 
	
</style>
